import React, { useRef, useEffect } from 'react'
import * as echarts from 'echarts'
import BlockTitle from '../../../../../framework/BlockTitle'
import SouyeApi from '../../../../../../utils/apis/SouyeApi';

export default function Ggfwss() {
    const chartRef = useRef()

    useEffect(() => {
        if (chartRef.current) {
            SouyeApi.cztzl_find('公共服务设施').then(resp => {
                // debugger
                // 根据图片数据
                const data = resp.data?.map(item=>{
                    return {
                        name: item.cztxl,
                        value: item.count
                    }
                });

                const colors = ['#65E3AC', '#0084FF'] // 两种交替颜色
                
                // 计算数据最大值，然后乘以系数来为发光点留出空间
                const dataMaxValue = Math.max(...data.map(item => item.value));
                const maxValue = dataMaxValue; // 柱子显示的最大长度
                const virtualMaxValue = dataMaxValue * 1.15; // 虚拟最大值，为发光点留空间

                const getOption = () => {
                    return {
                        backgroundColor: 'transparent',
                        grid: {
                            left: '5%',
                            right: '15%',
                            top: '5%',
                            bottom: '5%',
                            containLabel: false
                        },
                        xAxis: {
                            type: 'value',
                            show: false,
                            max: virtualMaxValue
                        },
                        yAxis: {
                            type: 'category',
                            data: data.map(item => ''),
                            inverse: true,
                            axisLine: { show: false },
                            axisTick: { show: false },
                            axisLabel: { show: false }
                        },
                        series: [
                            // 背景柱子（全长，不显眼的颜色）
                            {
                                type: 'bar',
                                data: data.map(item => maxValue),
                                barWidth: 6,
                                barGap: '-100%', // 完全重叠
                                itemStyle: {
                                    borderRadius: [0, 3, 3, 0],
                                    color: 'rgba(255, 255, 255, 0.08)' // 很淡的白色
                                },
                                z: 1
                            },
                            // 主柱子（实际数据）
                            {
                                type: 'bar',
                                data: data.map(item => item.value),
                                barWidth: 6,
                                barGap: '-100%', // 完全重叠
                                itemStyle: {
                                    borderRadius: [0, 3, 3, 0],
                                    color: function (params) {
                                        const colorIndex = params.dataIndex % 2;
                                        const color = colors[colorIndex];
                                        return new echarts.graphic.LinearGradient(
                                            0, 0, 1, 0,
                                            [
                                                { offset: 0, color: `${color}00` }, // 完全透明
                                                { offset: 0.3, color: `${color}66` }, // 40%透明度
                                                { offset: 0.7, color: `${color}CC` }, // 80%透明度
                                                { offset: 1, color: color } // 完全不透明
                                            ]
                                        );
                                    }
                                },
                                z: 2
                            },
                            // 发光点效果
                            {
                                type: 'scatter',
                                coordinateSystem: 'cartesian2d',
                                data: data.map((item, index) => [item.value, index]),
                                symbolSize: 8,
                                itemStyle: {
                                    color: function (params) {
                                        const colorIndex = params.dataIndex % 2;
                                        return colors[colorIndex];
                                    },
                                    shadowColor: function (params) {
                                        const colorIndex = params.dataIndex % 2;
                                        return colors[colorIndex];
                                    },
                                    shadowBlur: 10,
                                    opacity: 0.9
                                },
                                z: 3
                            },
                            // 外层发光环
                            {
                                type: 'scatter',
                                coordinateSystem: 'cartesian2d',
                                data: data.map((item, index) => [item.value, index]),
                                symbolSize: 15,
                                itemStyle: {
                                    color: 'transparent',
                                    borderColor: function (params) {
                                        const colorIndex = params.dataIndex % 2;
                                        return `${colors[colorIndex]}CC`; // 80%透明度，更接近柱子颜色
                                    },
                                    borderWidth: 2,
                                    shadowColor: function (params) {
                                        const colorIndex = params.dataIndex % 2;
                                        return colors[colorIndex];
                                    },
                                    shadowBlur: 15,
                                },
                                z: 1
                            },
                            // 最外层光圈
                            {
                                type: 'scatter',
                                coordinateSystem: 'cartesian2d',
                                data: data.map((item, index) => [item.value, index]),
                                symbolSize: 25,
                                itemStyle: {
                                    color: 'transparent',
                                    borderColor: function (params) {
                                        const colorIndex = params.dataIndex % 2;
                                        return `${colors[colorIndex]}80`; // 50%透明度，更接近柱子颜色
                                    },
                                    borderWidth: 1,
                                    shadowColor: function (params) {
                                        const colorIndex = params.dataIndex % 2;
                                        return colors[colorIndex];
                                    },
                                    shadowBlur: 20,
                                },
                                z: 0
                                                    },
                        // 用于显示左上方文本标签的透明柱子
                        {
                            type: 'bar',
                            data: data.map(item => 0), // 透明柱子，用于承载标签
                            barWidth: 6,
                            barGap: '-100%',
                            itemStyle: {
                                color: 'transparent'
                            },
                            label: {
                                show: true,
                                position: 'top',
                                color: '#ffffff',
                                fontSize: 12,
                                fontWeight: 'normal',
                                formatter: function(params) {
                                    return data[params.dataIndex]?.name || '';
                                },
                                offset: [0, -5], // 向上偏移
                                align: 'left' // 左对齐
                            },
                            z: 4
                        },
                        // 用于显示右侧数值标签的透明柱子
                        {
                            type: 'bar',
                            data: data.map(item => maxValue), // 使用最大值来定位右侧
                            barWidth: 6,
                            barGap: '-100%',
                            itemStyle: {
                                color: 'transparent'
                            },
                            label: {
                                show: true,
                                position: 'right',
                                color: '#ffffff',
                                fontSize: 12,
                                fontWeight: 'bold',
                                formatter: function(params) {
                                    return `${data[params.dataIndex]?.value || 0}个`;
                                },
                                offset: [10, 0] // 向右偏移
                            },
                            z: 4
                        }
                    ]
                    };
                };

                const chart = echarts.init(chartRef.current);
                chart.setOption(getOption());

                // 窗口大小调整时重新渲染图表
                const handleResize = () => {
                    chart.resize();
                };
                window.addEventListener('resize', handleResize);

                return () => {
                    window.removeEventListener('resize', handleResize);
                    chart.dispose();
                };
            })

        }
    }, []);

    return (
        <div className='fill layout-v' style={{
            position: 'relative'
        }}>
            <BlockTitle>公共服务设施</BlockTitle>
            <div
                className='fill'
                ref={chartRef}
                style={{
                    width: '100%',
                    height: '400px',
                    marginTop: '20px'
                }}
            />
            <div style={{
                position: 'absolute',
                top: '40px',
                right: '20px',
            }}>
                单位(处)
            </div>
        </div>
    )
}